<template>
	<view class="circle-container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="iconfont icon-icon_search search-icon"></text>
				<input class="search-input" placeholder="请输入搜索内容" />
			</view>
		</view>
		<!-- 顶部大图+分类叠加 -->
		<view class="banner-wrapper">
			<image class="banner-image" src="/static/images/circlebanner.png" mode="aspectFill"></image>
			<view class="banner-bottom-gradient"></view>
			<view class="category-nav-abs">
				<scroll-view scroll-x="true" show-scrollbar="false" class="category-scroll">
					<view class="category-list">
						<view 
							v-for="(item, index) in categories" 
							:key="index" 
							:id="'category-' + index"
							class="category-container"
						>
							<category-item
								:name="item.name"
								:icon-img="item.iconImg"
								:is-active="activeCategory === index"
								@switch="switchCategory(index)"
							/>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="main-content">
			<!-- 专题活动 -->
			<view class="section bg-white mt-base p-base rounded">
				<view class="section-header flex-between mb-sm">
					<view class="section-title flex items-center font-bold text-lg">
						<view class="icon-wrapper bg-gradient-warning">
							<text class="iconfont icon-huodong text-white"></text>
						</view>
						<text class="text-dark">专题活动</text>
					</view>
					<view class="more text-primary text-sm flex items-center" @tap="viewAllActivities">
						<text>查看全部</text>
						<text class="iconfont icon-gengduo ml-xs"></text>
					</view>
				</view>
				<scroll-view class="activity-scroll" scroll-x="true" show-scrollbar="false">
					<view class="activity-list">
						<ActivityCard
							v-for="(item, index) in activities" 
							:key="index"
							:activity="item"
							@view-detail="viewActivityDetail"
							@join="joinActivity"
						></ActivityCard>
					</view>
				</scroll-view>
			</view>
			
			<!-- 置顶与推广内容 -->
			<view class="pinned-section bg-white mt-base p-base rounded">
				<view class="section-header flex-between mb-sm pinned-header">
					<view class="section-title flex items-center font-bold text-lg">
						<view class="icon-wrapper pinned-gradient">
							<text class="iconfont icon-zhiding text-white"></text>
						</view>
						<text class="pinned-title">置顶与推广</text>
						<view class="pinned-badge ml-xs">2</view>
					</view>
				</view>
				
				<!-- 置顶内容1 -->
				<pinned-card 
					:post="pinnedPosts[0]" 
					@view-detail="viewPinnedDetail"
				></pinned-card>
				
				<!-- 置顶内容2 -->
				<pinned-card 
					:post="pinnedPosts[1]" 
					@view-detail="viewPinnedDetail"
				></pinned-card>
			</view>
			
			<!-- 动态列表 -->
			<view class="post-section bg-white mt-base p-base rounded">
				<view class="section-header flex-between mb-sm">
					<view class="section-title flex items-center font-bold text-lg">
						<view class="icon-wrapper bg-gradient-primary">
							<text class="iconfont icon-wenda text-white"></text>
						</view>
						<text class="text-dark">最新动态</text>
					</view>
				</view>
				
				<!-- 空状态显示 -->
				<view class="empty-state" v-if="posts.length === 0 && !loading">
					<text class="iconfont icon-empty empty-icon"></text>
					<view class="empty-text">{{ getEmptyText() }}</view>
					<button class="btn btn-outline mt-base clickable-mp" @tap="onRefresh">
						<text class="iconfont icon-shijian mr-xs"></text>刷新试试
					</button>
				</view>
				
				<view class="post-list" v-else>
					<post-card 
						v-for="(post, index) in posts" 
						:key="index"
						:post="post"
						@view-detail="viewPostDetail"
						@like="likePost($event, index)"
						@comment="commentPost"
						@share="sharePost"
						@post-deleted="handlePostDeleted"
						@post-updated="handlePostUpdated"
					></post-card>
				</view>
				
				<!-- 加载状态 -->
				<view class="loading" v-if="loading">
					<text class="iconfont icon-loading loading-icon"></text>
					<text class="text-sm text-gray">{{ getLoadingText() }}</text>
				</view>
				<view class="empty-state" v-if="noMore && posts.length > 0">
					<text class="text-sm text-gray">没有更多内容了</text>
				</view>
			</view>
		</view>
		
		<!-- 悬浮操作按钮 -->
		<view>
			<!-- 遮罩层 -->
			<view v-if="showFabMenu" class="fab-mask" @tap="closeFabMenu"></view>
			<!-- 弹出菜单 -->
			<view v-if="showFabMenu" class="fab-menu">
				<view class="fab-menu-item" @tap="publishPost" >
					<text class="iconfont icon-bianji"></text>
					<text class="fab-menu-text">发帖子</text>
				</view>
				<view class="fab-menu-item" @tap="publishActivity">
					<text class="iconfont icon-huodong"></text>
					<text class="fab-menu-text">发活动</text>
				</view>
			</view>
			<!-- 主悬浮按钮 -->
			<view class="float-btn flex-center" @tap="toggleFabMenu">
				<text class="iconfont" 
				:class="showFabMenu ? 'icon-jianshao' : 'icon-a-chuangjiantianjiapiliangtianjia'"></text>
			</view>
		</view>
		<CustomTabBar :isAdmin="false" />
	</view>
</template>

<script>
import ActivityCard from '@/components/circle/ActivityCard.vue';
import PostCard from '@/components/circle/PostCard.vue';
import PinnedCard from '@/components/circle/PinnedCard.vue';
import CategoryItem from '@/components/circle/CategoryItem.vue';
import CustomTabBar from '../../components/CustomTabBar.vue';
export default {
	components: {
		ActivityCard,
		PostCard,
		PinnedCard,
		CategoryItem,
		CustomTabBar
	},
	data() {
		return {
			refreshing: false,
			loading: false,
			noMore: false,
			page: 1,
			activeCategory: 0,
			activeTab: 0,
			categories: [
				{ name: '推荐', iconImg: '/static/images/cat1.jpg', value: 'all' },
				{ name: '热门讨论', iconImg: '/static/images/cat2.jpg', value: '讨论' },
				{ name: '校园问答', iconImg: '/static/images/cat3.jpg', value: '问答' },
				{ name: '校园吐槽', iconImg: '/static/images/cat4.jpg', value: '吐槽' },
				{ name: '失物招领', iconImg: '/static/images/cat5.jpg', value: '失物招领' }
			],
			filterTabs: ['最新', '热门', '关注'],
			activities: [],
			pinnedPosts: [],
			posts: [],
			showFabMenu: false
		};
	},
	async onLoad() {
		// 页面加载时初始化数据
		this.initData();
		this.fetchPostsFromCloud();
		uni.setStorageSync('posts', this.posts);
		await this.fetchActivitiesFromCloud();
		await this.fetchPinnedPosts();
	},
	onShow() {
		this.fetchPostsFromCloud();
	},
	methods: {
		goIndex() {
			uni.navigateTo({ url: '/pages/index/index' })
		},
		gomessage() {
			uni.navigateTo({ url: '/pages/message/MessageCenter/MessageCenter' })
		},
		gouser() {
			uni.navigateTo({ url: '/pages/user/user' })
		},
		// 初始化数据
		initData() {
			// 模拟网络请求获取数据
			this.fetchData();
		},
		
		// 获取数据
		fetchData(isLoadMore = false) {
			// 实际项目中这里应该是网络请求
			if (isLoadMore) {
				this.loading = true;
			}
			
			// 模拟网络请求延迟
			setTimeout(() => {
				if (!isLoadMore) {
					// 刷新数据
					// 实际项目中应该用返回数据替换
				} else {
					// 加载更多
					if (this.page > 3) {
						this.noMore = true;
					} else {
						// 模拟添加更多数据
						this.posts.push({
							id: this.posts.length + 1,
							avatar: '/static/images/avatar3.png',
							name: '王大力',
							college: '机械工程学院',
							time: '5小时前',
							tag: '问答',
							tagClass: 'question',
							content: '有人知道学校食堂什么时候开始供应冷饮吗？天气越来越热了。',
							likes: 18,
							comments: 7,
							isLiked: false
						});
					}
				}
				
				// 重置加载状态
				this.refreshing = false;
				this.loading = false;
			}, 1000);
		},
		
		// 下拉刷新
		onRefresh() {
			if (this.refreshing) return;
			
			this.refreshing = true;
			this.page = 1;
			this.noMore = false;
			this.fetchData();
		},
		
		// 上拉加载更多
		onLoadMore() {
			if (this.loading || this.noMore) return;
			
			this.page++;
			this.fetchData(true);
		},
		
		// 切换分类
		switchCategory(index) {
			if (this.activeCategory === index) return;
			
			this.activeCategory = index;
			// 清空当前帖子列表，显示加载状态
			this.posts = [];
			this.loading = true;
			// 切换分类后刷新数据
			this.fetchPostsFromCloud();
		},
		
		// 切换标签
		switchTab(index) {
			if (this.activeTab === index) return;
			
			this.activeTab = index;
			// 切换标签后刷新数据
			this.onRefresh();
		},
		
		// 查看活动详情
		viewActivityDetail(activity) {
			console.log('查看活动详情', activity);
			uni.navigateTo({
				url: `/pages/circle/activity-datail/activity-datail?id=${activity._id}`
			});
		},
		
		// 参与活动
		async joinActivity(item) {
			console.log('参与活动', item);
			try {
				// 检查登录状态
				const token = uni.getStorageSync('uni_id_token');
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '请先登录后再参与活动',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return;
				}
		
				// 调用云函数
				const res = await uniCloud.callFunction({
					name: 'joinactivity',
					data: {
						activityId: item._id,
						token: token
					}
				});
		
				if (res.result.success) {
					uni.showToast({ title: '参与成功', icon: 'success' });
					// 直接调用获取活动数据的方法
					await this.fetchActivitiesFromCloud();
					// 同时刷新帖子列表
					await this.fetchPostsFromCloud();
				} else {
					// 处理特定的错误码
					if (res.result.code === 'TOKEN_INVALID') {
						uni.showModal({
							title: '提示',
							content: '登录状态已失效，请重新登录',
							confirmText: '去登录',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								}
							}
						});
					} else {
						uni.showToast({ 
							title: res.result.message || '参与失败', 
							icon: 'none' 
						});
					}
				}
			} catch (err) {
				console.error('参与活动失败', err);
				uni.showToast({ title: '参与失败，请稍后重试', icon: 'none' });
			}
		},
		
		// 查看置顶帖子详情
		viewPinnedDetail(post) {
			uni.navigateTo({
				url: `/pages/circle/pinned-datail/pinned-datail?id=${post._id}`
			});
		},
		
		// 查看帖子详情
		viewPostDetail(post) {
			uni.navigateTo({
				url: `/pages/circle/post-datail/post-datail?id=${post._id}`
			});
		},
		
		 // 点赞帖子（修改后：调用handleLike云函数，触发消息生成）
		 async likePost(emitData, index) {
  // 1. 记录接收父组件事件，确认参数完整
  console.log('【Circle】接收 PostCard 事件，emitData：', emitData, '列表索引：', index);
  
  const post = emitData;
  const currentUserId = emitData.currentUserId;
  const actionType = emitData.action; // like/unlike

  // 2. 校验核心参数（帖子ID、作者ID、当前用户ID、操作类型）
  const requiredParams = [
    { key: 'post._id', value: post._id },
    { key: 'post.user_id', value: post.user_id },
    { key: 'currentUserId', value: currentUserId },
    { key: 'actionType', value: actionType }
  ];
  const missingParams = requiredParams.filter(item => !item.value);
  if (missingParams.length > 0) {
    console.error('【Circle】参数缺失，终止调用：', missingParams);
    uni.showToast({ title: '数据异常，操作失败', icon: 'none' });
    return;
  }
  console.log('【Circle】核心参数校验通过，准备调用云函数');

  try {
    // 3. 调用 handleLike 云函数，记录入参
    console.log('【Circle】开始调用 handleLike 云函数，入参：', {
      postId: post._id,
      userId: currentUserId,
      receiverId: post.user_id,
      actionType: actionType,
      postTitle: post.title || '未命名帖子'
    });

    const res = await uniCloud.callFunction({
      name: 'handleLike',
      data: {
        postId: post._id,
        userId: currentUserId,
        receiverId: post.user_id,
        actionType: actionType,
        postTitle: post.title || '未命名帖子'
      }
    });

    // 4. 记录云函数返回结果
    console.log('【Circle】handleLike 云函数返回结果：', res);

    if (res.result && res.result.success) {
      console.log('【Circle】云函数调用成功，消息已生成');
      uni.showToast({ title: actionType === 'like' ? '点赞+消息生成成功' : '取消点赞+消息生成成功' });
    } else {
      console.error('【Circle】云函数调用失败，原因：', res.result?.message || '未知错误');
      uni.showToast({ title: '操作成功，但消息生成失败', icon: 'none' });
    }
  } catch (e) {
    // 5. 捕获调用异常（如网络错误、云函数不存在）
    console.error('【Circle】调用 handleLike 云函数异常（catch）：', e);
    uni.showToast({ title: '云函数调用失败，请检查网络', icon: 'none' });
  }
}
		,
		
		// 评论帖子
		commentPost(post) {
			console.log('评论帖子', post);
			uni.navigateTo({
				url: `/pages/circle/post-datail/post-datail?id=${post._id}`
			});
		},
		
		// 分享帖子
		sharePost(post) {
			console.log('分享帖子', post);
			// 实际项目中应调用分享API
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			});
		},
		
		// 发布新帖子
		publishPost() {
			this.showFabMenu = false;
			// 跳转到发帖页面
			uni.navigateTo({
				url: '/pages/circle/post-create/post-create'
			});
		},
	
		
		// 查看全部活动
		viewAllActivities() {
			console.log('查看全部活动');
			uni.navigateTo({
				url: '/pages/circle/activities/activities'
			});
		},
		
		// 打开发布活动菜单
		toggleFabMenu() {
			this.showFabMenu = !this.showFabMenu;
		},
		//关闭发布活动菜单
		closeFabMenu() {
			this.showFabMenu = false;
		},
		//发布活动
		publishActivity() {
			this.showFabMenu = false;
			uni.navigateTo({
				url: '/pages/circle/addactivities/addactivities'
			});
		},
		// 获取帖子数据
		fetchPostsFromCloud() {
			this.loading = true;
			// 获取当前用户ID
			const userId = uni.getStorageSync('uni-id-pages-userInfo')._id;
			
			// 获取当前选择的分类
			const currentCategory = this.categories[this.activeCategory];
			let whereCondition = {
				content_type: 'post',
				// 只显示已发布和已审核通过的帖子，隐藏待审核、已拒绝、已隐藏的内容
				status: uniCloud.database().command.in(['published', 'reviewed_approved'])
			};
			
			// 如果不是推荐分类，添加分类过滤条件
			if (currentCategory.value !== 'all') {
				whereCondition.category = currentCategory.value;
			}

			uniCloud.database().collection('add-content')
				.where(whereCondition)
				.orderBy('create_time', 'desc')
				.get()
				.then(res => {
					const posts = res.result.data;
					// 收集所有 user_id
					const userIds = [...new Set(posts.map(item => item.user_id).filter(Boolean))];
					if (userIds.length === 0) {
						this.posts = [];
						this.loading = false;
						return;
					}

					// 获取用户点赞状态
					const getLikesPromise = userId ? 
						uniCloud.database().collection('user-likes')
							.where({
								user_id: userId,
								post_id: uniCloud.database().command.in(posts.map(p => p._id))
							})
							.get()
							.then(likesRes => {
								const likedPostIds = new Set(likesRes.result.data.map(like => like.post_id));
								return likedPostIds;
							}) : 
						Promise.resolve(new Set());

					// 批量查用户表
					const getUserInfoPromise = uniCloud.database().collection('uni-id-users')
						.where({
							_id: uniCloud.database().command.in(userIds)
						})
						.field('_id,avatar_file,nickname')
						.get()
						.then(userRes => {
							const userMap = {};
							userRes.result.data.forEach(u => {
								userMap[u._id] = u;
							});
							return userMap;
						});

					// 等待所有数据获取完成
					Promise.all([getLikesPromise, getUserInfoPromise])
						.then(([likedPostIds, userMap]) => {
							// 组装帖子数据
							this.posts = posts.map(item => {
								const user = userMap[item.user_id] || {};
								return {
									_id: item._id,
									user_id: item.user_id,
									avatar: user.avatar_file && user.avatar_file.url ? user.avatar_file.url : '/static/images/default-avatar.png',
									name: user.nickname || '匿名用户',
									time: this.formatTime(item.create_time),
									tag: item.category,
									tagClass: this.getTagClass(item.category),
									content: item.content,
									images: item.files || [],
									likes: item.like_count || 0,
									comments: item.comment_count || 0,
									isLiked: likedPostIds.has(item._id)
								}
							});
							this.loading = false;
						})
						.catch((err) => {
							console.error('帖子加载失败', err);
							this.loading = false;
							uni.showToast({ title: '数据加载失败', icon: 'none' });
						});
				})
				.catch((err) => {
					this.loading = false;
					console.error('帖子加载失败', err);
					uni.showToast({ title: '帖子加载失败', icon: 'none' });
				});
		},
		// 辅助方法
		formatTime(ts) {
			const date = new Date(ts);
			// 返回你想要的格式，比如"1小时前"或"2024-06-03 15:00"
			return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
		},
		getTagClass(category) {
			// 根据分类返回不同的样式class
			if (category === '讨论') return 'discussion';
			if (category === '失物招领') return 'lost';
			if (category === '问答') return 'question';
			// 其他分类...
			return '';
		},
		// 获取活动数据
		async fetchActivitiesFromCloud() {
			this.loading = true;
			try {
				// 获取当前用户ID
				const userId = uni.getStorageSync('uni-id-pages-userInfo')._id;
				
				// 获取所有活动 - 只显示已发布和已审核通过的活动
				const res = await uniCloud.database().collection('add-content')
					.where({ 
						content_type: 'activity', 
						status: uniCloud.database().command.in(['published', 'reviewed_approved'])
					})
					.orderBy('create_time', 'desc')
					.get();
				const activities = res.result.data;
				
				// 获取所有 user_id
				const userIds = [...new Set(activities.map(item => item.user_id).filter(Boolean))];
				let userMap = {};
				if (userIds.length) {
					const userRes = await uniCloud.database().collection('uni-id-users')
						.where({ _id: uniCloud.database().command.in(userIds) })
						.field('_id,avatar_file,nickname')
						.get();
					userRes.result.data.forEach(u => {
						userMap[u._id] = u;
					});
				}
				
				// 获取用户参与状态
				let userJoins = new Set();
				if (userId) {
					const joinsRes = await uniCloud.database().collection('activity_participants')
						.where({
							user_id: userId,
							activity_id: uniCloud.database().command.in(activities.map(a => a._id))
						})
						.get();
					userJoins = new Set(joinsRes.result.data.map(j => j.activity_id));
				}
				
				// 组装活动数据
				this.activities = activities.map(item => {
					const user = userMap[item.user_id] || {};
					return {
						_id: item._id,
						image: item.files && item.files.length ? item.files[0] : '/static/images/activity-default.png',
						tag: item.category || '',
						tagClass: item.category === '官方' ? 'official' : (item.category === '热门' ? 'hot' : ''),
						title: item.title,
						description: item.content,
						time: this.formatActivityTime(item.activity_time),
						location: item.location || '',
						avatars: user.avatar_file && user.avatar_file.url ? [user.avatar_file.url] : [],
						participants: item.attendee_count || 0,
						hasJoined: userJoins.has(item._id) // 添加参与状态
					}
				});
			} catch (err) {
				console.error('获取活动数据失败', err);
				uni.showToast({ title: '获取活动数据失败', icon: 'none' });
			} finally {
				this.loading = false;
			}
		},
		// 活动时间格式化
		formatActivityTime(ts) {
			if (!ts) return '';
			const date = new Date(ts);
			return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
		},
		// 删除帖子
		handlePostDeleted(post) {
			// 从帖子列表中移除被删除的帖子
			const index = this.posts.findIndex(p => p._id === post._id);
			if (index !== -1) {
				this.posts.splice(index, 1);
			}
			// 显示删除成功提示
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			});
			
			// 重新获取帖子列表
			this.fetchPostsFromCloud();
		},
		// 更新帖子
		handlePostUpdated(post) {
			// 处理帖子更新后的逻辑
			console.log('帖子已更新', post);
			// 这里可以添加一些逻辑，比如刷新帖子列表
		},
		// 获取空状态提示文本
		getEmptyText() {
			const currentCategory = this.categories[this.activeCategory];
			if (currentCategory.value === 'all') {
				return '暂无内容';
			}
			return `暂无${currentCategory.name}相关内容`;
		},
		
		// 获取加载状态提示文本
		getLoadingText() {
			const currentCategory = this.categories[this.activeCategory];
			if (currentCategory.value === 'all') {
				return '加载中...';
			}
			return `正在加载${currentCategory.name}内容...`;
		},
		
		// 获取置顶帖子
		async fetchPinnedPosts() {
			try {
				// 获取置顶帖子 - 只显示已发布和已审核通过的置顶内容
				const res = await uniCloud.database().collection('add-content')
					.where({
						content_type: 'pinned',
						status: uniCloud.database().command.in(['published', 'reviewed_approved'])
					})
					.orderBy('create_time', 'desc')
					.get();
				const pinnedPosts = res.result.data;
				// 获取所有 user_id
				const userIds = [...new Set(pinnedPosts.map(item => item.user_id).filter(Boolean))];
				let userMap = {};
				if (userIds.length) {
					const userRes = await uniCloud.database().collection('uni-id-users')
						.where({ _id: uniCloud.database().command.in(userIds) })
						.field('_id,avatar_file,nickname')
						.get();
					userRes.result.data.forEach(u => {
						userMap[u._id] = u;
					});
				}
				// 获取当前用户点赞状态
				const userInfo = uni.getStorageSync('uni-id-pages-userInfo');
				let likedMap = {};
				if (userInfo && userInfo._id && pinnedPosts.length) {
					const likeRes = await uniCloud.database().collection('user-likes')
						.where({
							user_id: userInfo._id,
							post_id: uniCloud.database().command.in(pinnedPosts.map(p => p._id))
						})
						.get();
					likeRes.result.data.forEach(like => {
						likedMap[like.post_id] = true;
					});
				}
				// 组装置顶帖子数据
				this.pinnedPosts = pinnedPosts.map(item => {
					const user = userMap[item.user_id] || {};
					return {
						_id: item._id || '',
						avatar: user.avatar_file && user.avatar_file.url ? user.avatar_file.url : '/static/images/default-avatar.png',
						name: user.nickname || '匿名用户',
						type: item.category || '官方',
						time: this.formatTime(item.create_time),
						content: item.content || '',
						images: item.files || [],
						likes: item.like_count || 0,
						comments: item.comment_count || 0,
						isLiked: likedMap[item._id] || false
					};
				});
			} catch (err) {
				console.error('获取置顶帖子失败', err);
				uni.showToast({ title: '获取置顶帖子失败', icon: 'none' });
				this.pinnedPosts = [];
			}
		}
	}
};
</script>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/common.scss';
/* 导入微信小程序兼容样式 */
@import '@/styles/platform-mp.scss';

.circle-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #F8F9FC; /* 更淡的背景色 */
	/* 为底部导航栏预留空间，避免内容被遮挡 */
	padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.search-bar {
	padding: 32rpx 24rpx 0 24rpx;
	background: #f8f9fc;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background: #f5f6fa;
	border-radius: 32rpx;
	padding: 0 24rpx;
	height: 64rpx;
}

.search-icon {
	font-size: 32rpx;
	color: #b0b6be;
	margin-right: 12rpx;
}

.search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 28rpx;
	color: #333;
}

.banner-wrapper {
	position: relative;
	width: 100%;
	height: 320rpx;
}

.banner-image {
	width: 100%;
	height: 320rpx;
	object-fit: cover;
	display: block;
}

.banner-bottom-gradient {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120rpx;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 100%);
	z-index: 1;
	pointer-events: none;
}

.category-nav-abs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -50rpx;
	z-index: 2;
	display: flex;
	justify-content: center;
	padding: 0 20rpx;
}

.category-scroll {
	width: 100%;
	overflow: visible;
}

.category-list {
	display: flex;
	align-items: flex-end;
	gap: 12rpx;
}

.category-container {
	width: 20vw;
	min-width: 20vw;
	display: flex;
	justify-content: center;
	margin: 0 8rpx;
}

.category-item {
	width: 100%;
	margin: 0;
	background: rgba(255,255,255,0.95);
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
	border: 1rpx solid rgba(255,255,255,0.8);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 20rpx 12rpx 16rpx 12rpx;
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10rpx);
	
	&:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.12);
	}
}

.category-item.active {
	background: linear-gradient(135deg, rgba($primary-color, 0.12), rgba($primary-color, 0.08));
	border: 2rpx solid $primary-color;
	box-shadow: 0 8rpx 32rpx rgba(77,124,191,0.25);
	transform: translateY(-4rpx) scale(1.02);
}

.category-item.active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba($primary-color, 0.08), rgba($primary-color, 0.04));
	border-radius: 24rpx;
	z-index: -1;
}

.main-content {
	margin-top: 56rpx;
	flex: 1;
	/* 这里放原有的内容区 */
}

.header {
	background-color: $white;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.02);
}

.header-left .iconfont {
	font-size: $font-size-xl;
	color: $primary-color;
}

.header-left .title {
	font-size: $font-size-lg;
}

.header-right .iconfont {
	font-size: $font-size-lg;
	color: $gray;
	margin-left: $spacing-lg;
	transition: all $transition-fast;
	
	&:active {
		color: $primary-color;
		transform: scale(1.05);
	}
}

.header-right .avatar {
	width: 60rpx;
	height: 60rpx;
	margin-left: $spacing-lg;
	border: 2rpx solid $extra-light-gray;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.content-scroll {
	flex: 1;
	height: calc(100vh - 170rpx);
	padding-bottom: 20rpx; 
}

.section {
	position: relative;
	border-radius: $border-radius-base;
	overflow: hidden;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
	border: 1rpx solid rgba(0, 0, 0, 0.02);
}

/* 标题图标样式 */
.icon-wrapper {
	width: 64rpx;
	height: 64rpx;
	border-radius: $border-radius-circle;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: $spacing-xs;
	
	&.bg-gradient-primary {
		background: linear-gradient(135deg, $primary-color, lighten($primary-color, 15%));
	}
	
	&.bg-gradient-warning {
		background: linear-gradient(135deg, $warning-color, lighten($warning-color, 15%));
	}
	
	&.bg-gradient-muted {
		background: linear-gradient(135deg, #7E8B9A, #A9B4C0);
	}
	
	.iconfont {
		font-size: $font-size-lg;
	}
}

.section-title .iconfont {
	font-size: $font-size-lg;
}

.more {
	position: relative;
	padding: $spacing-xs $spacing-sm;
	border-radius: $border-radius-lg;
	transition: all $transition-fast;
	
	&:active {
		background-color: $bg-color-hover;
	}
}

.badge {
	font-size: $font-size-xs;
	background-color: $error-color;
	color: $white;
	border-radius: $border-radius-circle;
	width: 32rpx;
	height: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.activity-scroll {
	white-space: nowrap;
	margin: 0 -$spacing-xs;
}

.activity-list {
	display: inline-flex;
	padding: $spacing-xs $spacing-xs;
}

.fab-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.18);
	z-index: 98;
}

.fab-menu {
	position: fixed;
	right: 48rpx;
	/* 调整悬浮菜单位置，避免被底部导航栏遮挡 */
	bottom: calc(100rpx + constant(safe-area-inset-bottom) + 120rpx);
	bottom: calc(100rpx + env(safe-area-inset-bottom) + 120rpx);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 100;
	animation: fab-fade-in 0.25s;
}
@keyframes fab-fade-in {
	from { opacity: 0; transform: translateY(30rpx);}
	to { opacity: 1; transform: translateY(0);}
}
.fab-menu-item {
	display: flex;
	align-items: center;
	background: #fffbe8;
	border-radius: 32rpx;
	box-shadow: 0 2rpx 12rpx rgba(77,124,191,0.13);
	padding: 18rpx 32rpx;
	margin-bottom: 24rpx;
	font-size: 30rpx;
	color: #333;
	transition: all 0.2s;
	&:active {
		background: #ffe9a7;
		transform: scale(0.97);
	}
	.iconfont {
		font-size: 38rpx;
		margin-right: 16rpx;
		color: #f7c948;
	}
}
.fab-menu-text {
	font-weight: 600;
	font-size: 28rpx;
}
.float-btn {
	position: fixed;
	right: $spacing-lg;
	/* 调整悬浮按钮位置，避免被底部导航栏遮挡 */
	bottom: calc(100rpx + constant(safe-area-inset-bottom) + 20rpx);
	bottom: calc(100rpx + env(safe-area-inset-bottom) + 20rpx);
	width: 100rpx;
	height: 100rpx;
	border-radius: $border-radius-circle;
	background: linear-gradient(135deg, $primary-color, lighten($primary-color, 10%));
	color: $white;
	box-shadow: 0 4rpx 16rpx rgba(77, 124, 191, 0.3);
	z-index: 99;
	transition: all $transition-base;
}

.float-btn .iconfont {
	font-size: $font-size-xl;
}

.float-btn:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(77, 124, 191, 0.2);
}

/* 加载和空状态 */
.loading {
	padding: $spacing-lg 0;
	text-align: center;
	
	.loading-icon {
		display: inline-block;
		animation: rotate 1s linear infinite;
		margin-right: $spacing-xs;
	}
}

.empty-state {
	padding: $spacing-xl 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.empty-icon {
		font-size: 80rpx;
		color: $light-gray;
		margin-bottom: $spacing-base;
	}
	
	.empty-text {
		color: $gray;
		font-size: $font-size-base;
		margin-bottom: $spacing-base;
	}
}

.text-muted {
	color: $gray;
}

.text-dark {
	color: $dark-gray;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.pinned-header {
  align-items: center;
  margin-bottom: 18rpx;
}
.pinned-gradient {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #e7d7a7 0%, #f7e7b7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(231, 215, 122, 0.18);
}
.pinned-title {
  color: #000000;
  font-size: 32rpx;
  font-weight: 700;
  margin-right: 8rpx;
}
.pinned-badge {
  background: #e7d77a;
  color: #4a4a4a;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 600;
  padding: 0 14rpx;
  min-width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4rpx;
  box-shadow: 0 2rpx 8rpx rgba(231, 215, 122, 0.10);
}
	/* 底部导航栏 */
	.tab-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #EEEEEE;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 0;
	}

	.tab-item text {
		font-size: 12px;
		color: #999;
		margin-top: 6rpx;
	}

	.tab-item.active text {
		color: #3B7FF3;
	}
</style>
